<script>
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import props from './toolbarProps.js'
/**
 * Toolbar 工具条
 * @description
 * @tutorial https://www.uvui.cn/components/toolbar.html
 * @property {boolean}	show			是否展示工具条（默认 true ）
 * @property {boolean}	showBorder			是否展示工具条下方边框（默认 false ）
 * @property {string}	cancelText		取消按钮的文字（默认 '取消' ）
 * @property {string}	confirmText		确认按钮的文字（默认 '确认' ）
 * @property {string}	cancelColor		取消按钮的颜色（默认 '#909193' ）
 * @property {string}	confirmColor	确认按钮的颜色（默认 '#3c9cff' ）
 * @property {string}	title	标题文字
 * @event {Function}
 * @example
 */
export default {
  name: 'Toolbar',
  mixins: [mpMixin, mixin, props],
  emits: ['confirm', 'cancel'],
  methods: {
    // 点击取消按钮
    cancel() {
      this.$emit('cancel')
    },
    // 点击确定按钮
    confirm() {
      this.$emit('confirm')
    },
  },
}
</script>

<template>
  <view v-if="show" class="uv-toolbar box-border w-full" :class="[{ 'uv-border-bottom': showBorder }]" @touchmove.stop.prevent="noop">
    <view class="uv-toolbar__cancel__wrapper" hover-class="uv-hover-class">
      <text class="uv-toolbar__wrapper__cancel" :style="{
        color: cancelColor,
      }" @tap="cancel"
      >
        {{ cancelText }}
      </text>
    </view>
    <view class="uv-toolbar__confirm__wrapper ml-[20rpx]" hover-class="uv-hover-class">
      <text class="uv-toolbar__wrapper__confirm" :style="{
        color: confirmColor,
      }" @tap="confirm"
      >
        {{ confirmText }}
      </text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
$show-lines: 1;
$show-hover: 1;
$show-border: 1;
$show-border-bottom: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
$uv-tips-color: #909193 !default;
$uv-main-color: #303133 !default;
$uv-primary: #3c9cff !default;

.uv-toolbar {
  padding-bottom: 20rpx;
  @include flex;
  justify-content: center;
  // align-items: center;

  &__wrapper {
    &__cancel {
      color: #000 !important;
      font-size: 15px;
      padding: 0 15px;
      background-color: #f6f6f6;
      width: 334rpx;
      height: 76rpx;
      border-radius: 8rpx;
      line-height: 76rpx;
      text-align: center;
    }
  }

  &__title {
    color: $uv-main-color;
    padding: 0 60rpx;
    font-size: 16px;
    flex: 1;
    text-align: center;
  }

  &__wrapper {
    &__confirm {
      color: #fff !important;
      font-size: 15px;
      padding: 0 15px;
      width: 334rpx;
      height: 76rpx;
      line-height: 76rpx;
      text-align: center;
      background-color: #fe8e1f;
      border-radius: 8rpx;
    }
  }
}
</style>
